<template>
    <div class="defalut_header base_background_color">
        <BaseLayoutHeader>
            <template #onLeft>
                <div @click="handleBack" class="on_left">
                    <i class="iconfont icon-fanhui" />
                </div>
            </template>
            <template #onCenter>
                <div class="on_center">
                    <span>
                        {{ title }}
                    </span>
                </div>
            </template>
        </BaseLayoutHeader>
    </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import BaseLayoutHeader from './BaseLayoutHeader.vue';
import { onMounted, onUnmounted } from 'vue';

const props = defineProps({
    title: {
        type: String,
    }
})

const router = useRouter();

const handleBack = () => {
    router.back();
}

onMounted(() => {
    const keydownHandle = (e: KeyboardEvent) => {
        if (e.key == 'Escape') {
            e.preventDefault();
            handleBack();
        }
    }

    addEventListener('keydown', keydownHandle);

    onUnmounted(() => {
        removeEventListener('keydown', keydownHandle);
    })
})

</script>

<style lang="scss" scoped>
.defalut_header {
    min-height: 5%;

    .on_left {
        display: flex;
        align-items: center;
        padding: 10px;
    }

    .on_center {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
